<template>
  <div class="top">
    <el-button type="primary">保存</el-button>
    <a href="http://127.0.0.1:8880/user/list"
      ><el-button @click="handleClick">返回</el-button></a
    >
  </div>
  <hr />
  <div class="main">
    <el-form :rules="rules">
      <el-form-item label="用户编辑" class="yhbm" prop="rule1">
        <el-input v-model="formLabelAlign.name" placeholder="请输入用户编码" />
      </el-form-item>
      <el-form-item label="用户姓名" class="yhxm" prop="rule1">
        <el-input v-model="formLabelAlign.name" placeholder="请输入用户姓名" />
      </el-form-item>
      <el-form-item label="用户密码" class="yhmm" prop="rule1">
        <el-input v-model="formLabelAlign.name" placeholder="请输入用户密码" />
      </el-form-item>
      <el-form-item label="用户头像" class="yhtx">
        <el-input v-model="formLabelAlign.name" placeholder="请选择用户头像" />
      </el-form-item>
      <el-button type="primary" class="tx">头像</el-button>
      <el-form-item label="用户性别" class="yhxb">
        <el-input v-model="formLabelAlign.name" placeholder="请输入用户编码" />
      </el-form-item>
      <el-form-item label="生&emsp;&emsp;日" class="sr">
        <el-input v-model="formLabelAlign.name" placeholder="请输入用户姓名" />
      </el-form-item>
      <el-form-item label="入职时期" class="rzsq">
        <el-input v-model="formLabelAlign.name" placeholder="请输入用户密码" />
      </el-form-item>
      <el-form-item label="部&emsp;&emsp;门" class="bm">
        <el-input v-model="formLabelAlign.name" placeholder="请选择用户头像" />
      </el-form-item>
      <el-form-item label="职&emsp;&emsp;位" class="zw">
        <el-input v-model="formLabelAlign.name" placeholder="请输入用户职位" />
      </el-form-item>
      <el-form-item label="电&emsp;&emsp;话" class="dh" prop="rule1">
        <el-input v-model="formLabelAlign.name" placeholder="请输入用户电话" />
      </el-form-item>
      <el-form-item label="用户邮箱" class="yhyx">
        <el-input v-model="formLabelAlign.name" placeholder="请输入用户邮箱" />
      </el-form-item>
    </el-form>
  </div>
  <div class="jsgl">
    <span>用户角色：</span>
    <label><input type="checkbox" />超级管理员</label>
    <label><input type="checkbox" />学生账号</label>
    <label><input type="checkbox" />采购经理角色</label>
    <label><input type="checkbox" />门店店员权限</label>
    <label><input type="checkbox" />店员</label>
  </div>
  <div class="dz">
    用户地址
    <el-input v-model="input" placeholder="输入用户地址" class="one" />
  </div>
  <div class="bz">
    备&emsp;&emsp;注：<el-input
      v-model="textarea"
      class="two"
      maxlength=""
      placeholder="输入备注"
      show-word-limit
      type="textarea"
    />
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const handleClick = () => {
  router.push("/user/list");
};
const textarea = ref("");
const labelPosition = ref("right");
const input = ref("");
const formLabelAlign = reactive({
  name: "",
  region: "",
  type: "",
});
const rules = {
  rule1: [
    {
      required: true,
    },
  ],
};
</script>

<style lang="less" scoped>
.yhbm {
  width: 240px;
  float: left;
}
.yhxm {
  width: 240px;
  float: left;
  margin-left: 80px;
}
.yhmm {
  width: 240px;
  float: left;
  margin-left: 80px;
  margin-right: 50px;
}
.yhtx {
  width: 240px;
  float: left;
  margin-left: 50px;
}
.yhxb {
  width: 240px;
  float: left;
  margin-top: 30px;
}
.sr {
  width: 240px;
  float: left;
  margin-left: 80px;
  margin-top: 30px;
}
.rzsq {
  width: 240px;
  float: left;
  margin-left: 80px;
  margin-top: 30px;
}
.bm {
  width: 240px;
  float: left;
  margin-left: 80px;
  margin-top: 30px;
}
.zw {
  width: 240px;
  float: left;
  margin-top: 30px;
}
.dh {
  width: 240px;
  float: left;
  margin-left: 80px;
  margin-top: 30px;
}
.yhyx {
  width: 240px;
  float: left;
  margin-left: 80px;
  margin-top: 30px;
}
.tx {
  float: left;
  width: 50px;
}
.jsgl {
  position: absolute;
  top: 430px;
}
input {
  margin-left: 12px;
}
.bz {
  position: absolute;
  top: 555px;
}
.dz {
  position: absolute;
  top: 490px;
}
.one {
  width: 1200px;
}
.two {
  width: 1220px;
}
.top {
  position: absolute;
  top: 65px;
  right: 10px;
}
.main {
  margin-top: 80px;
}
hr {
  margin-top: 40px;
}
</style>
